const webpack = require('webpack')
const path = require('path')
const RemarkHTML =require("remark-html");
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 清理dist目录
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 此plugin不需要解构 默认就是导出此成员

class MyPlugin {
  apply(compiler) {
    // console.log('my plugin staring')

    compiler.hooks.emit.tap('MyPlugin', compilation=> {
      for(const name in compilation.assets) {
        // console.log(compilation.assets[name].source())
        if(name.endsWith('.js')){
          const contents = compilation.assets[name].source()
          const withoutcomments = contents.replace(/\/\*\*+\*\//g,'')
          compilation.assets[name] = {
            source: () => withoutcomments,
            size: () => withoutcomments.length 
          }
        }
      }
    })
  }
}

module.exports = {
  mode: 'none', // 模式选择   development production none
  entry: './src/main.js', // 必须是相对路径
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'), // 绝对路径  因为本身是运行在node环境中，所以直接引入path
    // publicPath: 'dist/', //引用资源默认是根目录下  需要设置为dist/   // new HtmlWebpackPlugin() 之后就不需要了
  },
  devServer: {
    hot: true,  // 开启HDR 热更新模式
    contentBase: './dist', // 指定一个额外的静态资源目录的方式
    proxy: { // 代理API
      '/api': {
        // http://localhost:8080/api/users -> https://api.githun.com/api/uses
        target: 'https://api.github.com',
        pathRewrite: { '^/api': '' },
        changeOrigin: true,
      },
    }
  },
  devtool: 'source-map',
  // source-map 有12种模式
  // cheap-module-eval-source-map  开发模式  
  // none  // 生产模式
  module: {
    rules: [
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',  // 处理es6新特性
          options: {
            presets: ['@babel/preset-env']
          },
        }
      },
      {
        test: /.css$/,
        use: [ // 从后往前执行
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /.png$/,
        // use: 'file-loader'
        // use: 'url-loader'  // 适用于体积比较小的资源 减少请求次数  
        use: {
          loader: 'url-loader',
          options: {
            limit: 10* 1024 // 10KB
          } // 如果做限制的话  必须有file-loader
        }
      },
      {
        test: /.html$/,
        use: {
          loader: 'html-loader', // 只默认触发 img的src属性 
          options: {
            // attributes: ['img:src','a:href']  // 这样就可以拿到其他标签的图片属性
            sources: {
              list: [
                {
                  tag: 'img',
                  attribute: 'data-src',
                  type: 'src',
                },
                // {
                //   tag: 'link',
                //   attribute: 'data-href',
                //   type: 'src',
                // },
              ]
            }
          }
        }
      },
      {
        test: /\.md$/,
        use: [
          {
            loader: "html-loader",
          },
          {
            loader: "remark-loader",
            options: {
              remarkOptions: {
                plugins: [RemarkHTML],
              },
            },
          },
        ],
      },
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.join(__dirname,'./index.html')
  }),
  // new CopyWebpackPlugin([
  //   'public'
  // ]),
  new MyPlugin(),
  new webpack.HotModuleReplacementPlugin()
  ]
}
